<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='lb'/></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <link rel="stylesheet" href="${web_domain}/resources/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="${web_domain}/resources/plugins/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="${web_domain}/resources/plugins/ztree/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="${web_domain}/resources/plugins/ztree/js/jquery.ztree.exedit.js"></script>
    <SCRIPT type="text/javascript">

        function zTreeOnClick(treeId, treeNode, clickFlag) {

            $("#form").attr("src", "${web_domain}/securitys/nav/" + treeNode.id + "/edit");
        }

        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
//            if (treeNode.pId != null) {
//                return;
//            }
            var addStr = "&nbsp;<span class='button add feijin-add' id='addBtn_" + treeNode.tId + "' data-id='" + treeNode.id + "' title='<fmt:message key='tjejcd'/>' style ></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.tId);
            if (btn) btn.bind("click", function (e) {

                $("#form").attr("src", "${web_domain}/securitys/nav/" + treeNode.id + "/createChild");
                e.stopPropagation();
            });
        }
        ;
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
        }
        ;

        var setting = {
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true
                },
                key: {
                    id: "id",
                    name: "title",
                    open: "spread"
                }
            },
            callback: {
                beforeClick: zTreeOnClick
            }
        };


        $(document).ready(function () {
            var treeObj = $.fn.zTree.init($("#navigationTree"), setting, ${navigation});
            treeObj.expandAll(true);
        });


    </SCRIPT>
    <style type="text/css">
        .ztree li span.button.add {
            margin-left: 2px;
            margin-right: -1px;
            background-position: -144px 0;
            vertical-align: top;
            *vertical-align: middle
        }

        iframe {
            width: 100%;
            height: calc(100vh - 61px);
            margin: 0;
            padding: 0;
            border: none;
        }
    </style>
    <style>
        .feijin-split {
            border-left: 1px dashed #ccc;
        }
    </style>
</HEAD>

<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header"><a href="${web_domain}/securitys/roles/"><fmt:message key='jsgl'/></a> / "${role.showName}"<fmt:message key='ddhcd'/></div>
        <div class="layui-field-box layui-form">

            <div class="">
                <div class="layui-row layui-col-space30">
                    <div class="layui-col-md3">
                        <a href="javascript:void(0);" onclick="$('#form').attr('src', '${web_domain}/securitys/nav/${role.id}/create');" class="layui-btn layui-btn-xs layui-btn-normal" id="add"><i class="layui-icon">&#xe61f;</i> <fmt:message key='tjdjcd'/></a>
                        <a href="javascript:location.reload();" class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon">&#xe669;</i><fmt:message key='sx3'/></a>
                        </br>
                        </br>
                        <ul id="navigationTree" class="ztree"></ul>
                    </div>
                    <div class="layui-col-md9">
                        <div class="feijin-split">
                            <iframe id="form" src="">
                            </iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


</HTML>
</fmt:bundle>
</html>